<template>
  <div class="box">
    <div class="main-re">
      <div class="main-left">
        <SingerSongHeader :artist=artist :user="user"></SingerSongHeader>

        <router-view :SingerName=artist.name></router-view>

      </div>
      <div class="main-right">
        <div class="g-wrap7">
          <h3 class="u-hd4">热门歌手
          </h3>
          <ul class="m-rctlist" v-if="singerList">
            <li v-for="(item,index) in singerList" :key="index">
              <div class="cver" :title="item.name">
                <img :src="item.img1v1Url" alt="">
                <router-link :to="{name: 'Work', params: {id: item.id}}" class="cver-a"
                             :title="item.name"></router-link>
              </div>
              <p class="cver-title">
                <router-link :to="{name: 'Work', params: {id: item.id}}" :title="item.name">
                  {{ item.name }}
                </router-link>
              </p>
            </li>
          </ul>
          <h3 class="u-hd5">网易云音乐多端下载</h3>
          <ul class="m-multi">
            <li>
              <a href="https://apps.apple.com/cn/app/id590338362">
                iPhone
              </a>
            </li>
            <li>
              <a href="#">PC</a>
            </li>
            <li>
              <a href="#">Android</a>
            </li>
          </ul>
          <p class="mu-p">同步歌单，随时畅听320k好音乐</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import SubNav from "@/components/SubNav";
import SingerSongHeader from "@/views/SingerSongDetail/SingerSongHeader";
import {voiceDuration} from "@/utils/voiceDuration";

export default {
  name: 'index',

  components: {
    Header, Footer, SubNav, SingerSongHeader, Comment
  },
  data() {
    return {
      voiceDuration: voiceDuration,
      artist: {},
      identify: {},
      secondaryExpertIdentiy: [],
      user: {},
      singerList: []
    }
  },
  methods: {
    async getSingerDetail() {
      let result = await this.$API.reqSingerDetail(this.$route.params.id)
      this.artist = result.data.data.artist
      this.identify = result.data.data.identify
      this.user = result.data.data.user
      this.secondaryExpertIdentiy = result.data.data.secondaryExpertIdentiy
    },
    async getTopSinger() {
      let result = await this.$API.reqTopSinger()
      this.singerList = result.data.artists
    }

  },
  mounted() {
    this.getSingerDetail()
    this.getTopSinger()
  },
  computed: {},
  created() {
  }


}
</script>

<style scoped lang="less">
.box {
  margin: 0 auto;
}

.main-re {
  width: 982px;
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
  border: 1px solid #D3D3D3;

  .main-left {
    width: 710px;
    float: left;
    border-right: 1px solid #D3D3D3;
  }
}

.main-right {
  width: 270px;
  height: 800px;
  float: right;

  .g-wrap7 {
    padding: 20px 40px 40px 30px;

    .u-hd3 {
      height: 23px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
    }

    .m-piclist {
      height: auto;
      overflow: hidden;
      margin-left: -13px;
      padding-bottom: 25px;

      li {
        width: 53px;
        height: 53px;
        display: inline;
        float: left;
        padding: 0 0 13px 13px;

        a {
          width: 40px;
          height: 40px;

          img {
            width: 40px;
            height: 40px;
          }
        }
      }
    }

    .u-hd4 {
      height: 23px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
    }

    .m-rctlist {
      width: 225px;
      overflow: hidden;
      height: auto;

      li {
        float: left;
        width: 50px;
        height: 92px;
        //padding-left: 25px;
        margin-right: 25px;

        .cver {
          float: left;
          width: 50px;
          height: 50px;
          position: relative;

          img {
            width: 50px;
            height: 50px;
          }

          .cver-a {
            width: 50px;
            height: 50px;
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
          }
        }


        .cver-title {
          //max-width: 100%;
          width: 50px;
          height: 16px;
          display: inline-block;
          text-align: center;
          margin-top: 5px;

          a {
            color: #000;
            max-width: 100%;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }

        .cver-name {
          margin-top: -7px;
          display: flex;
          align-items: center;
          max-width: 100%;

          .cver-name-a {
            color: #666;
            max-width: 100%;
            display: inline-block;
          }

          img {
            width: 13px;
            height: 13px;

          }
        }

      }
    }

    .u-hd5 {
      height: 23px;
      margin-top: 30px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
    }

    .m-multi {
      height: 65px;
      margin-bottom: 10px;
      background-position: 0 -392px;
      background-image: url("../../assets/sprite.png");

      li {
        float: left;

        &:nth-child(1) {
          a {
            display: block;
            width: 42px;
            height: 48px;
            text-indent: -9999px;
          }
        }

        &:nth-child(2) {
          width: 60px;
          height: 48px;
          margin: 0 26px 0 30px;

          a {
            display: inline-block;
            text-indent: -9999px;
            width: 60px;
            height: 48px;
          }
        }

        &:nth-child(3) {
          a {
            display: block;
            width: 42px;
            height: 48px;
            text-indent: -9999px;
          }
        }
      }
    }

    .mu-p {
      color: #999;
    }
  }
}

</style>